<template>
  <div class="collectBox">
    <div class="collectHeader">
      <i class="el-icon-s-order" style="color: rgb(255, 103, 0)"></i>
    </div>
    <div class="Box">
      <div class="profile">
        <p style="margin-bottom: 15px">收货地址</p>
        <div class="userInfo">
          <p>陈同学</p>
          <p>13580018623</p>
          <p>广东 广州 白云区 江高镇</p>
          <p>广东白云学院</p>
        </div>
        <p class="order_pOne">商品及优惠券</p>
        <p v-for="(item, index) in $store.state.shopping" :key="index" class="order_pTow">
          <span class="order">
            <img :src="$getImg + item.product_picture" />
            <span>
              {{ item.product_name }}
            </span>
          </span>
          <span>{{ item.product_price }}元 x {{ item.product_sales }}</span>
          <span style="color: orangered">{{ item.product_price }}元</span>
        </p>
        <p class="order_pOne">
          <span>配送方式</span>
          <small style="color: orangered; margin-left: 40px">包邮</small>
        </p>
        <p class="order_pOne">
          <span>发票</span>
          <small style="color: orangered; margin-left: 40px">
            <span>电子发票</span>
            <span style="margin: 0 20px">个人</span>
            <span>商品明细</span>
          </small>
        </p>

        <div class="footer">
          <div></div>
          <div>
            <p>
              <span>商品件数：</span> <small>{{ $store.getters.goodsNum }}件</small>
            </p>
            <p><span>商品总价：</span> <small>价格</small></p>
            <p><span>活动优惠：</span> <small>-0元</small></p>
            <p><span>优惠券抵扣：</span> <small>-0元</small></p>
            <p><span>运费：</span> <small>0元</small></p>
            <p>
              <span>应付总额：</span> <strong>{{ $store.getters.cont }}元</strong>
            </p>
          </div>
        </div>

        <div class="btnBox">
          <div></div>
          <div>
            <button @click="$router.push('/shopping')">返回购物车</button>
            <button @click="settle">结算</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import OrderAPI from "@/api/PageAPI/OrderAPI.js";
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    //   结算时将数据再次进行存储 保存当前的商品
    async settle() {
      this.$store.commit("orderEvent", this.$store.state.shopping);
      this.$notify({
        title: "成功",
        message: "购买成功",
        type: "success",
      });
      //   跳转到订单列表
      this.$router.push("/Order");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-icon-s-order::after {
  content: "确认订单";
  color: black;
}

.userInfo {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid orangered;
}

img {
  width: 50px;
  height: 50px;
}
.order {
  display: flex;
  align-items: center;
}
.order_pTow,
.order_pOne {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.order_pTow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ddd;
    small,
    strong {
      color: orangered;
    }
  }
}
.btnBox {
  display: flex;
  margin-top: 20px;
  border-top: 1px solid #ddd;
  justify-content: space-between;
  padding: 20px;
  button {
    width: 200px;
    height: 40px;
    margin-left: 20px;
  }
  button:nth-child(1) {
    color: #888;
  }
  button:nth-child(2) {
    color: #fff;
    background: orangered;
    border: none;
    border-color: #ccc;
  }
}
</style>
